import React, { forwardRef } from 'react';
import './index.scss';

export interface ComponentBackgroundProps {
  /**
   * 自定义类名
   */
  className?: string;
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  /**
   * 子组件
   */
  children?: React.ReactNode;
  /**
   * 宽度
   */
  width?: number | string;
  /**
   * 高度
   */
  height?: number | string;
  /**
   * 背景透明度
   */
  opacity?: number;
  /**
   * 是否启用响应式
   */
  responsive?: boolean;
  /**
   * 设计模式
   */
  __designMode?: string;
  /**
   * 组件ID
   */
  componentId?: string;
  /**
   * 组件名称
   */
  _componentName?: string;
  /**
   * 其他属性
   */
  [key: string]: any;
}

const ComponentBackground = forwardRef<HTMLDivElement, ComponentBackgroundProps>(({
  className = '',
  style = {},
  children,
  width,
  height,
  opacity = 1,
  responsive = true,
  __designMode,
  componentId,
  _componentName,
  ...otherProps
}, ref) => {
  const customStyle: React.CSSProperties = {
    ...style,
    opacity,
  };

  if (width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  
  if (height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  const combinedClassName = [
    'component-gradient-background',
    responsive ? 'responsive' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div 
      ref={ref}
      className={combinedClassName}
      style={customStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      {...otherProps}
    >
      {children}
    </div>
  );
});

ComponentBackground.displayName = 'ComponentBackground';

export default ComponentBackground; 